<%--
  Created by IntelliJ IDEA.
  User: MAVI003
  Date: 2017/4/1
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>书籍分类</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/icon.jpg">
    <link rel="bookmark" href="${pageContext.request.contextPath}/images/icon.jpg">

    <link href="//cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://ibootstrap-file.b0.upaiyun.com/www.layoutit.com/css/builder/v3/layoutit.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/layoutit.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/my.css" rel="stylesheet">
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript"
            src="http://cdn.staticfile.org/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="http://ibootstrap-file.b0.upaiyun.com/www.layoutit.com/js/jquery.htmlClean.js"></script>
    <script type="text/javascript"
            src="http://ibootstrap-file.b0.upaiyun.com/www.layoutit.com/js/builder/v3/scripts.min.js"></script>
    <style type="text/css">
        body{
            background-image: url(${pageContext.request.contextPath}/images/7.jpg);
            background-size:cover;
        }

        .myback{
            background-image: url(${pageContext.request.contextPath}/images/7.jpg);
            background-size:cover;
        }
    </style>

</head>
<body>
<div class="container">

    <div class="row clearfix hideLine" >
        <div class="col-md-12 column hideLine myback">
            <jsp:include page="navigation.jsp"></jsp:include>
            <ul class="breadcrumb">
                <li>
                    <a href="#">全部分类</a>
                </li>
                <li>
                    <a href="#">书籍</a>
                </li>

            </ul>
        </div>
    </div>


    <c:forEach items="${afterGoodsModels}" var="each" varStatus="status">
            <c:if test="${status.count eq 1 || (status.count-1) % 4 eq 0}">
                <div class="row">
            </c:if>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img height="200px" src="${pageContext.request.contextPath}/upload/${each.gpicture}"
                         class="img-rounded"/>
                    <div class="caption">

                        <h4>
                            产品名称: ${each.gname}
                        </h4>
                        <h4>
                            商品低价:${each.gprice}
                        </h4>
                        <p>
                            <a class="btn btn-primary" href="${pageContext.request.contextPath}/showGoodsDetail?gid=${each.gid}">详情</a>
                        </p>
                    </div>
                </div>
            </div>

            <c:if test="${status.count % 4 eq 0 || status.count eq 4}">
                </div>
            </c:if>
        </c:forEach>

</div>

    <div class="pager">
        <ul>
            <c:if test="${afterHasPrePage}">
                <li><a href="${pageContext.request.contextPath}/showBookkinds?page=1">首页</a></li>
                <li>
                    <a href="${pageContext.request.contextPath}/showBookkinds?page=${afterPrePage}">上一页</a>
                </li>
            </c:if>
            <c:forEach begin="1" end="${afterPageNum}" var="each">
                <c:choose>
                    <c:when test="${each == nowPage}">
                        <li class="active"><a style="color:black;">${each}</a></li>
                    </c:when>
                    <c:when test="${each >= (nowPage - 2) && each <= (nowPage + 2)}">
                        <li>
                            <a href="${pageContext.request.contextPath}/showBookkinds?page=${each}">${each}</a>
                        </li>
                    </c:when>
                </c:choose>
            </c:forEach>
            <c:if test="${afterHasNextPage}">
                <li>
                    <a href="${pageContext.request.contextPath}/showBookkinds?page=${afterNextPage}">下一页</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/showBookkinds?page=${afterPageNum}">尾页</a>
                </li>
            </c:if>
        </ul>
    </div>
</body>
</html>

